<script setup lang="ts">
import { Container } from "@/views/domain/kubeHud/api/k8s/types";
import KContainer from "../../components/KContainer.vue";
import KDescGroup from "../../components/KDescGroup.vue";
import KDescRow from "../../components/KDescRow.vue";
import { IconContainer } from "@/views/domain/kubeHud/views/k8s/components/icons";
type Prop = {
  containers?: Container[];
};

const props = defineProps<Prop>();
</script>

<template>
  <div>
    <KContainer v-for="container in containers" :key="container.name">
      <KDescGroup :title="container.name" fill>
        <template #title>
          <el-space class="mb-2">
            <el-icon><IconContainer /></el-icon>
            <span class="text-sm">容器:{{ container.name }}</span>
          </el-space>
        </template>
        <KDescRow
          v-for="env in container.env"
          :key="env.name"
          :label="env.name"
          :value="env.value"
        />
        <div
          v-if="!container.env || container.env.length === 0"
          class="p-3 text-gray-600"
        >
          <span>未发现环境变量</span>
        </div>
      </KDescGroup>
    </KContainer>
  </div>
</template>
<style lang="scss" scoped></style>
